<html xmlns="http://www.w3.org/1999/xhtml" xmlns:c="http://java.sun.com/jstl/core"
      xmlns:f="http://java.sun.com/jsf/core" xmlns:h="http://java.sun.com/jsf/html" 
      xmlns:ui="http://java.sun.com/jsf/facelets" xmlns:t="http://myfaces.apache.org/tomahawk"
      xmlns:v="http://shale.apache.org/validator">

<f:view>
<f:loadBundle var="text" basename="#{userTest.bundleName}"/>
<head>
    <title>#{text['take.test.heading']}</title>
    <meta name="menu" content="UserMenu"/>
	<style type="text/css">
    	.question-pic {text-align:left; align:left;float=left}
  		.question {text-align:left; background=red;font-size=32}
  	</style>
</head>

<p> <h:outputText value="#{userTest.testTemplate.instructions}" rendered="#{userTest.displayInstructions}"/> </p>

<h2>
	<h:outputText value="#{userTest.currentSectionDescription}" rendered="#{not empty userTest.currentSectionDescription}"/>
</h2>
<h:messages style="color:red;margin:8px;"/>	

<div class="tests_background">
<h:form id="userTest" partialTriggers="prevBtn1 prevBtn2 prevBtn3 prevBtn4">
<h:panelGroup layout="block">
	<h:commandButton value="Previous" action="#{userTest.prev}" styleClass="previous_small_active" id="prevBtn1" partialSubmit="true" rendered="#{userTest.previous and !userTest.singleItem}"/>
	<h:commandButton value="Previous" styleClass="previous_small_inactive" rendered="#{not userTest.previous and !userTest.singleItem}" partialSubmit="true" id="prevBtn2" />
	<h:commandButton value="#{text['button.submit_test']}" action="#{userTest.submitTestToBackend}" styleClass="button_small" partialSubmit="true"  rendered="#{userTest.submitTest and !userTest.singleItem}" />
	<h:commandButton value="Next" action="#{userTest.next}" styleClass="next_small_active"  partialSubmit="true" rendered="#{userTest.next}" />
</h:panelGroup>

<!-- Layout with item answers under question -->
<h:dataTable rendered="#{!userTest.singleItem and !userTest.table}" 
		value="#{userTest.currentAnswerItems}" var="item"
		rows="25" 
		styleClass="mainTable" headerClass="standardTable_Header" rowClasses="rowA, rowB" >
	<t:column>
		<h:panelGroup>
			<h:outputText value="#{item.description}" escape="false"/>
			<h:selectOneRadio value="#{item.selectedOption}" layout="lineDirection" >
							<f:selectItems value="#{item.availableOptions}" itemLabelEscaped="false"/>
							<f:validator validatorId="RequiredFieldsValidator" />
			</h:selectOneRadio>
		</h:panelGroup>
	</t:column>	
</h:dataTable>

<!--Whole page for item-->
<h:dataTable	rendered="#{userTest.singleItem}"
		value="#{userTest.currentAnswerItems}" var="item"
		rows="25" 
		styleClass="mainTable" headerClass="standardTable_Header" rowClasses="rowA, rowB" >
	<t:column>
		<h:panelGroup>
			<h:outputText value="#{item.description}" escape="false"/>
			<h:selectOneRadio value="#{item.selectedOption}" required="true" layout="pageDirection" >
							<f:selectItems value="#{item.availableOptions}" itemLabelEscaped="false"/>
			</h:selectOneRadio>
		</h:panelGroup>
	</t:column>	
</h:dataTable>`

<!-- Layout with item answers next to question -->
<t:dataTable id="sections" var="section" value="#{userTest.currentAnswerItems}" 
	rows="25" 
	sortColumn="#{userTest.sortColumn}" sortAscending="#{userTest.ascending}" 
	styleClass="mainTable" headerClass="standardTable_Header" rowClasses="rowA, rowB" columnClasses=",horizontal_options"
	rendered="#{!userTest.singleItem and userTest.table}">
<t:column>
	<f:facet name="header">
		<t:commandSortHeader columnName="Questions" arrow="false">
			<h:outputText value="Questions" />
		</t:commandSortHeader>
	</f:facet>
	<h:outputText  value="#{section.description}" escape="false"/>
</t:column>

<t:column>
	<f:facet name="header">
		<t:commandSortHeader columnName="Answers Options" arrow="false">
			<h:outputText value="Answers Options"/>
		</t:commandSortHeader>
	</f:facet>
	<h:selectOneRadio value="#{section.selectedOption}" style="text-align:middle;border:none;" layout="lineDirection">
		<f:selectItems value="#{section.availableOptions}" itemLabelEscaped="false"/>
		<f:validator validatorId="RequiredFieldsValidator" />
	</h:selectOneRadio>	
</t:column>
</t:dataTable>
   
<h:panelGroup style="margin: 10px 4px;" layout="block">
	<h:commandButton value="Previous" action="#{userTest.prev}" styleClass="previous_small_active"  partialSubmit="true" id="prevBtn4" rendered="#{userTest.previous and !userTest.singleItem}"/>
	<h:commandButton value="Previous" styleClass="previous_small_inactive" rendered="#{not userTest.previous and !userTest.singleItem}" partialSubmit="true" id="prevBtn3"/>
	<h:commandButton value="#{text['button.submit_test']}" action="#{userTest.submitTestToBackend}" styleClass="button_small" partialSubmit="true"  rendered="#{userTest.submitTest and not userTest.singleItem}" />
	<h:commandButton value="Next" action="#{userTest.next}" styleClass="next_small_active"  partialSubmit="true" rendered="#{userTest.next}" />
</h:panelGroup>
</h:form>
</div>
<h:form>
<h:commandButton value="#{text['button.cancel']}" action="mainMenu" id="cancel" immediate="true" styleClass="button_small"/>
</h:form>
</f:view>
</html>
